<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边 */
				float:left;
				margin-right:50px; /*图片与文字连接处间隙*/
				margin-bottom: 50px;/*图片与文字连接处间隙*/
			}
			p{
				font-size:16px;/* 页面默认字体尺寸*/
				line-height:20px;/*浮动文字 ，行高无法设定*/
				word-spacing:5px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/蜡笔小新3.com.png" alt="妮妮" width="250px" heigth="250px">
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. At, quasi sunt? Consequatur dicta et nam minus fuga magni eveniet eos facere sint, odit magnam ducimus, error soluta adipisci alias perferendis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum reiciendis quia molestias temporibus quae obcaecati laboriosam, quasi expedita, voluptatibus reprehenderit quo non! Inventore accusamus corporis quam voluptatibus, illo animi iste. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, sed. Quasi neque qui quas, dolorum aliquid ipsa debitis voluptate voluptatum doloribus laborum aut, error, beatae natus rem dignissimos eligendi quisquam? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus adipisci dicta molestias ut quae repudiandae officia nihil? Esse quis, pariatur maiores, cumque veritatis, ullam consequatur necessitatibus voluptate autem praesentium minus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate pariatur iste minus. Dolores ab temporibus esse nisi modi vitae pariatur adipisci cupiditate nobis veritatis, officiis repellendus dolore ratione vel ullam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora magni consequatur nemo voluptates! Porro quas illo cupiditate, nisi explicabo fugiat commodi vero soluta sapiente doloribus rerum et odit officiis molestias?</p>
	</body>
</html>